<template>
  <el-card class="user-profile">
    <h2>用户资料</h2>
    <el-form v-if="user" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="user.username" disabled />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="user.nickname" disabled />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="user.email" disabled />
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="user.contact" disabled />
      </el-form-item>
      <el-form-item label="商家身份">
        <el-tag :type="user.is_seller ? 'success' : 'info'">
          {{ user.is_seller ? '是' : '否' }}
        </el-tag>
      </el-form-item>
      <el-form-item v-if="!user.is_seller">
        <el-button type="primary" @click="switchSeller">切换为商家</el-button>
      </el-form-item>
    </el-form>
    <div v-else>
      <el-input v-model="userId" placeholder="输入用户ID" style="width: 200px;" />
      <el-button type="primary" @click="fetchProfile">查询资料</el-button>
    </div>
    <el-alert v-if="msg" :title="msg" type="info" show-icon class="msg-alert" />
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const user = ref(null)
const userId = ref('')
const msg = ref('')

const fetchProfile = async () => {
  try {
    const res = await axios.get(`/user/profile/${userId.value}`)
    user.value = res.data
    msg.value = ''
  } catch (e) {
    msg.value = e.response?.data?.detail || '查询失败'
    ElMessage.error(msg.value)
  }
}
const switchSeller = async () => {
  try {
    await axios.post('/user/switch_seller', null, { params: { user_id: user.value.id } })
    user.value.is_seller = true
    msg.value = '切换为商家成功'
    ElMessage.success(msg.value)
  } catch (e) {
    msg.value = e.response?.data?.detail || '切换失败'
    ElMessage.error(msg.value)
  }
}
</script>

<style scoped>
.user-profile {
  max-width: 400px;
  margin: 40px auto;
  padding: 32px 24px;
  border-radius: 12px;
  background: #f8f9fa;
}
.msg-alert {
  margin-top: 16px;
}
</style> 